{% extends "base.html" %}
{% block content %}
<h2>Appointments</h2>

<section class="card">
  <h3>Create Appointment</h3>
  <form method="post" action="{{ url_for('create_appointment') }}" class="form-grid">
    <input name="patient_id" placeholder="Patient ID" required />
    <input name="staff_id" placeholder="Staff ID" required />
    <input name="department_id" placeholder="Department ID (optional)" />
    <label>Appointment datetime (UTC)</label>
    <input name="appointment_datetime" type="datetime-local" required />
    <input name="duration_minutes" placeholder="Duration minutes" value="30" />
    <input name="reason" placeholder="Reason" />
    <button type="submit">Create</button>
  </form>
</section>

<section class="card">
  <h3>Appointments List ({{ appointments|length }})</h3>
  <table class="striped">
    <thead>
      <tr><th>ID</th><th>Patient</th><th>Staff</th><th>Datetime</th><th>Duration</th><th>Reason</th><th>Actions</th></tr>
    </thead>
    <tbody>
      {% for a in appointments %}
      <tr>
        <td>{{ a.appointment_id }}</td>
        <td>{{ a.patient_first_name or a.patient_id }} {{ a.patient_last_name or "" }}</td>
        <td>{{ a.staff_first_name or a.staff_id }} {{ a.staff_last_name or "" }}</td>
        <td>{{ a.appointment_datetime }}</td>
        <td>{{ a.duration_minutes }}</td>
        <td>{{ a.reason or "" }}</td>
        <td>
          <form method="post" action="{{ url_for('delete_appointment', appointment_id=a.appointment_id) }}" style="display:inline">
            <button class="btn danger" type="submit" onclick="return confirm('Delete appointment #{{ a.appointment_id }}?')">Delete</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}
